
// 隐藏显示头部
let flag = 1
$('#hide').on('click', function () {
  if (flag === 1) {
    $('#top').hide()
    $('.layui-icon-down').show()
    $('.layui-icon-up').hide()
    flag = 0
  } else {
    $('#top').show()
    $('.layui-icon-down').hide()
    $('.layui-icon-up').show()
    flag = 1
  }
})
let token = localStorage.getItem('token')
let q = {
  catename:"",
  page:1,
  limit:10,
 
}

// 渲染列表
function getList() {
  axios({
    method: 'get',
    url: 'http://124.223.14.236:8060/admin/ydd_cate/list',
    headers: {
      "x-token": token
    },
    params:q,

  }).then(res => {
  console.log(res);
    let new_arr = res.data.data.data.map((item, value) => {
      return `
                <tr>
                          <td>${value + 1}</td>
                          <td>${item.id}</td>
                          <td>${item.catename}</td>
                          <td>${item.icon}</td>
                          <td>${item.sort_num}</td>
                          <td><button class="layui-btn layui-btn-normal sure" data-id="${item.id}">
                          <i class="layui-icon layui-icon-edit"></i>
                          </button>
                         <button class="layui-btn layui-btn-danger delete" data-id="${item.id}" >
                          <i class="layui-icon layui-icon-delete"></i>
                          </button></td>
                        </tr>
                `
    })
    $('#tb').html(new_arr.join(''))
     // 页面分页
  layui.use('laypage', function(){
    var laypage = layui.laypage;
    
    //执行一个laypage实例
    laypage.render({
        elem: 'pages' //注意，这里的 test1 是 ID，不用加 # 号
        ,count: res.data.data.count //数据总数，从服务端得到
        ,layout:['count','limit','prev','page','next','skip'],
        limit: q.limit,
        curr: res.data.data.currentPage,
        limits:[5,10,40,50,100]
        ,jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
        
        //首次不执行
        if(!first){
            q.page  = obj.curr
            q.limit = obj.limit;
            getList();
        }
        }
    });
    });

  }).catch(err => {
    alert('网络错误,请稍后重试')
  })
}
// 调用getList函数
getList()

$('#class_form').on('submit',function (e) {
  e.preventDefault()
  q.catename = $('#classList').val()
  getList()
})
// 刷新页面
$('#refresh').on('click', function () {
 window.location.reload()
})

$('#more').on('click',function(){
  
})
// 添加分类
$('#add_btn').on('click', function () {
  layer.open({
    area: ['700px', '387px'],
    title: '添加分类',
    btn: null,
    content: ` <form class="layui-form" action="" id="submit_add">
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-inline">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入分类名" autocomplete="off" class="layui-input lsitName" id="listName">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">图标</label>
              <div class="layui-input-inline">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input icon" id="icon">
              </div>
              <a href="http://www.fontawesome.com.cn/icons-ui/">具体参见fontawesome图标库</a>
            </div>
            <label class="layui-form-label">排序大小</label>
            <div class="p-num">
                <a href="javascript:;" class="decrement">-</a>
                <input type="text" class="itxt" value="1" id="nub-size">
                <a href="javascript:;" class="increment">+</a>
        </div>
        <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="reset" class="layui-btn layui-btn-primary">取消</button>
          <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
       
        </div>
      </div>
        
          </form>`
  })

  // 计数器 + -
  $('.increment').click(function () {
    var n = $(this).siblings('.itxt').val()
    // 当n = 10 时不再做加法
    if (n == 10) return
    n++
    // 把这个加之后的值,赋值给 input
    $(this).siblings('.itxt').val(n)
  })
  // ---------减法---------
  $('.decrement').click(function () {
    //$('this) 指向减法那个按钮
    var n = $(this).siblings('.itxt').val()
    // 当 n 等于1  的 时候 ,不在做减法
    if (n == 1) return
    n--
    // 把这个加之后的值,赋值给 input
    $(this).siblings('.itxt').val(n)

  })

})


$('body').on('submit', '#submit_add', function (e) {
  //阻止默认提交行为
  e.preventDefault();
  axios({
    method: 'post',
    url: 'http://124.223.14.236:8060/admin/ydd_cate/add',
    headers: {
      "x-token": token
    },
    data: {
      "catename": $('#listName').val(),
      "sort_num": $('#nub-size').val(),
      "icon": $('#icon').val(),
    },
  }).then(res => {
    console.log(res.data);
    if (res) {
      //1.关闭弹框（最新的）
      layer.close(layer.index);
      //1.2提示成功
      layer.msg('添加成功');
      //2.重新渲染列表
      getList()
    } else {
      layer.msg('添加失败')
    }
    console.log(res.data);
  })
})

$('#reset').on('click',function(){
  $('#classList').val('')
  q.catename = ''
  getList()
})
 
// 编辑
//编辑功能
$('#tb').on('click', '.sure', function () {
  //获取id
  let id = $(this).attr('data-id')
  //获取用户点击编辑按钮这一行上的分类名称和别名
  let td_arr = $(this.parentNode.parentNode).children()
  layer.open({
    area: ['568px', '387px'],
    title: '修改分类',
    btn: null,
    content: `<form class="layui-form" action="" id="submit_edit" data-id=${id}>
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-inline">
                <input type="text" name="title" required value="${td_arr[2].innerHTML}" lay-verify="required" placeholder="请输入分类名" autocomplete="off" class="layui-input lsitName" id="listName">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">图标</label>
              <div class="layui-input-inline">
                <input type="text" name="title" required value="${td_arr[3].innerHTML}" lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input icon" id="icon">
              </div>
              <a href="http://www.fontawesome.com.cn/icons-ui/">具体参见fontawesome图标库</a>
            </div>
            <label class="layui-form-label">排序大小</label>
            <div class="p-num">
                <a href="javascript:;" class="decrement">-</a>
                <input type="text" class="itxt" value="${td_arr[4].innerHTML}" id="nub-size">
                <a href="javascript:;" class="increment">+</a>
        </div>
        <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="reset" class="layui-btn layui-btn-primary">取消</button>
          <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
        </div>
      </div>
        
          </form>`
  });
  $('.increment').click(function () {
    var n = $(this).siblings('.itxt').val()
    // 当n = 10 时不再做加法
    if (n == 10) return
    n++
    // 把这个加之后的值,赋值给 input
    $(this).siblings('.itxt').val(n)
  })
  // ---------减法---------
  $('.decrement').click(function () {
    //$('this) 指向减法那个按钮
    var n = $(this).siblings('.itxt').val()
    // 当 n 等于1  的 时候 ,不在做减法
    if (n == 1) return
    n--
    // 把这个加之后的值,赋值给 input
    $(this).siblings('.itxt').val(n)

  })

})

//绑定submit事件 （编辑）
$('body').on('submit', '#submit_edit', function (e) {
  //阻止默认提交行为
  e.preventDefault();
  axios({
    method: 'POST',
    url: 'http://124.223.14.236:8060/admin/ydd_cate/update',
    headers: {
      "x-token": token
    },

    data: {
     
      catename: $('#listName').val(),
      sort_num: $('#nub-size').val(),
      icon: $('#icon').val(),
      id: $('#submit_edit').attr('data-id'),
    }
  }).then(res => {
    if (res) {
      //1.关闭弹框（最新的）
      layer.close(layer.index);
      //1.2提示成功
      layer.msg('修改成功');
      //2.重新渲染列表
      getList()
    } else {
      layer.msg('修改失败')
    }
  })
})



//删除功能
$('#tb').on('click', '.delete', function () {
  let id = $(this).attr('data-id')
  console.log(id);
  layer.open({
    title: '提示',
    content: '确认删除？',
    btn: ['确定', '取消', ],
    yes: function (index, layero) {
      //按钮【按钮一】的回调
      deleteCateOne(id)
    },
    btn2: function (index, layero) {
      //按钮【按钮二】的回调
//  $('.layui-layer-setwin').click()
      //return false 开启该代码可禁止点击该按钮关闭
    }
  });
})

function deleteCateOne(id) {
  axios({
    method: 'GET',
    url: 'http://124.223.14.236:8060/admin/ydd_cate/del',
    headers:{
      "x-token": token
    },
    params:{
      id: id
    }
  }).then(res => {
    console.log(res.data);
    if (res.data.errno === 1000) {
     layer.msg('删除失败')
    } else {
      //1.关闭弹框（最新的）
      layer.close(layer.index);
      //1.2提示成功
      layer.msg('删除成功');
      //2.重新渲染列表
      getList()
    }
  })
}




